<template>
  <div>
    <div class="map">
      <el-row>
        <el-col :span="20">
          地点
          <el-input
            placeholder="请填写项目地点搜索"
            v-model="where"
            id="where"
            style="width: 80%; display: inline-block"
          ></el-input>
          <el-button
            style="display: inline-block; margin: 10px 0 10px 10px"
            type="primary"
            size="small"
            @click="sear(where)"
            >搜 索</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          经度
          <el-input
            v-model="lng"
            style="width: 80%; display: inline-block"
            id="lng"
          ></el-input>
        </el-col>
        <el-col :span="10">
          纬度
          <el-input
            v-model="lat"
            style="width: 80%; display: inline-block"
            id="lat"
          ></el-input>
        </el-col>
      </el-row>
      <el-row>
        <div
          style="
            width: 95%;
            height: 340px;
            border: 1px solid gray;
            margin: 10px;
          "
          id="container"
        ></div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 经纬度
      lng: "103.905428",
      lat: "36.057062",
      // 地址
      where: "",
    };
  },
  mounted() {
    if (this.lng) {
      // 根据经度纬度查地点
      var point = new BMap.Point(this.lng, this.lat);
      var gc = new BMap.Geocoder();
      let _this = this;
      gc.getLocation(point, function (rs) {
        // var addComp = rs;
        // console.log(
        //   addComp.province +
        //     ", " +
        //     addComp.city +
        //     ", " +
        //     addComp.district +
        //     ", " +
        //     addComp.street +
        //     ", " +
        //     addComp.streetNumber,
        //   "addComp"
        // );
        let address =
          rs.surroundingPois[0].address + "，" + rs.surroundingPois[0].title;
        _this.where = address;
      });
    }
    // 渲染地图
    this.$nextTick(() => {
      this.huaMap();
    });
  },
  methods: {
    // 地图
    dingwei() {
      var _this = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        //   console.log(r,"地址");
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          var mk = new BMap.Marker(r.point);
          _this.Bmap.addOverlay(mk);
          _this.Bmap.panTo(r.point);
          _this.lng = r.point.lng;
          _this.lat = r.point.lat;
          _this.where = r.address.province + r.address.city;
          //   _this.where = r.address.city;
        } else {
          console.log("获取定位失败");
        }
      });
    },

    sear(result) {
      console.log(result, "传参");
      //地图搜索
      if (result.length == 0) {
        this.dingwei();
        return false;
      }
      var local = new BMap.LocalSearch(this.Bmap, {
        renderOptions: { map: this.Bmap },
      });
      local.search(result);
    },
    iploac(result) {
      //根据IP设置地图中心
      var cityName = result.name;
      this.Bmap.setCenter(cityName);
    },
    huaMap() {
      this.Bmap = new BMap.Map("container"); //在指定的容器内创建地图实例
      this.Bmap.setDefaultCursor("crosshair"); //设置地图默认的鼠标指针样式
      this.Bmap.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用。
      var point = new BMap.Point(this.lng, this.lat);
      this.Bmap.centerAndZoom(point, 18);
      this.Bmap.addControl(new BMap.NavigationControl());
      var marker = new BMap.Marker(point); // 创建标注
      this.Bmap.addOverlay(marker);
      let _this = this;
      this.Bmap.addEventListener("click", function (e) {
        //地图单击事件
        var geocoder = new BMap.Geocoder();
        var point = new BMap.Point(e.point.lng, e.point.lat);

        geocoder.getLocation(point, function (geocoderResult, LocationOptions) {
          _this.Bmap.clearOverlays();
          _this.Bmap.addControl(new BMap.NavigationControl());
          var marker = new BMap.Marker(point); // 创建标注
          _this.Bmap.addOverlay(marker);
          //定位成功
          var address = geocoderResult.address;
          _this.where = address;
        });
        _this.lng = e.point.lng;
        _this.lat = e.point.lat;
      });
      if (!this.lng) {
        var myCity = new BMap.LocalCity();
        myCity.get(this.iploac);
        this.dingwei();
      }
    },
  },
};
</script>

<style scoped>

</style>